<template>
  <div class="page">
    <navigation>{{ title }}</navigation>
    <div class="form">
      <div class="form-item">
        <input v-model="form.username" type="text" class="form-inp" :placeholder="$t('请输入持卡人姓名')">
      </div>
      <div class="form-item">
        <input v-model="form.account" type="text" class="form-inp" :placeholder="$t('请输入银行卡卡号')">
      </div>
      <div class="form-item">
        <div class="lab">{{ $t('银行卡开户行') }}</div>
        <div class="val">
          <select class="form-inp select" @change="changeBank">
            <option value="" hidden disabled selected>{{ $t('请选择') }}</option>
            <option v-for="item in bankList" :key="item.id" :value="item.bank_name" :selected="form.bank_name === item.bank_name">{{ item.bank_name }}</option>
          </select>
          <i class="iconfont icon-jiantouarrow487"></i>
        </div>
      </div>
      <div class="ftbar">
        <button v-if="type === 'edit'" type="button" class="btn del" @click="bandleDelProceed">{{ $t('删除') }}</button>
        <button type="button" class="btn confirm" @click="sendForm">{{ $t('完成') }}</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import navigation from '@/components/Navigation.vue'
export default {
  components: { navigation },
  data () {
    return {
      title: this.$t('新建收款信息（银行卡）'),
      form: {},
      type: '',
      bankList: []
    }
  },
  mounted () {
    this.type = this.$route.query.type
    if (this.type === 'edit') {
      this.title = this.$t('修改收款信息')
      this.getProceed({ id: this.$route.query.id })
        .then((data) => {
          this.form = data.data
        })
    }
    this.getBankList()
      .then((data) => {
        this.bankList = data.data
      })
  },
  methods: {
    ...mapActions({
      getBankList: 'user/getBank',
      getProceed: 'user/getProceed',
      upProceed: 'user/upProceed',
      addProceed: 'user/addProceed',
      delProceed: 'user/delProceed'
    }),
    changeBank (e) {
      this.form.bank_name = e.target.value
    },
    sendForm () {
      if (this.loading) { return false }
      const payload = {}
      do {
        if (!this.form.account || !this.form.username || !this.form.bank_name) {
          this.errmsg = this.$t('提交内容不能为空')
          break
        }
        payload.account = this.form.account
        payload.username = this.form.username
        payload.bank_name = this.form.bank_name
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      if (this.form.id) {
        payload.id = this.form.id
      }
      this.loading = true
      payload.proceeds_type = 'bank'
      this[this.type + 'Payment'](payload)
    },
    editPayment (payload) {
      this.upProceed(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    },
    addPayment (payload) {
      this.addProceed(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    },
    bandleDelProceed () {
      if (this.loading) { return false }
      const payload = {
        id: this.form.id
      }
      this.loading = true
      this.delProceed(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.form {
  background-color: #fff;
  padding-bottom: 40px;
}
.form-item {
  position: relative;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-item:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 0;
  height: 0;
  border-bottom: 1px solid #eee;
}
.form-inp {
  flex-grow: 1;
  font: inherit;
  background: #fff;
}
.form-inp.select {
  appearance: none;
  direction: rtl;
  cursor: pointer;
}
.form-inp:read-only {
  text-align: right;
  cursor: pointer;
}
.form-item .lab,
.form-item .val {
  font: inherit;
}
.form-item .val {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftbar .btn {
  flex: 1 0 0;
  line-height: 40px;
  height: 40px;
  font-size: 16px;
  letter-spacing: 4px;
}
.ftbar .btn.confirm {
  background: #1b8afe;
  color: #fff;
}
</style>
